<template>
  <div>
    <div class="app_card mb-2 pt-4 pb-4">
      <div class="d-flex justify-content-end align-items-center">
        <div>
          <el-button type="primary" @click="onAdd()">添加</el-button>
          <el-button type="primary" plain @click="onDeleteMulti()">删除</el-button>
        </div>
      </div>
    </div>
    <div class="app_card pt-4  pb-5">
      <el-table stripe size="large" :data="dataOfTable"  height="calc(100vh - 300px)" sortable="custom" @sort-change="handleSortChange" @selection-change="handleSelectionChange">
        <el-table-column fixed type="selection" width="50" />
        <el-table-column prop="Id" label="ID" sortable> </el-table-column>
        <el-table-column prop="Name" label="名称" sortable> </el-table-column>
        <el-table-column prop="Seq" label="顺序" sortable> </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button link type="primary" @click="onEditRow(scope.row)">编辑
            </el-button>
            <el-button link type="primary" @click="onAllocate(scope.row)">分配
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt-2">
        <el-pagination background v-model:currentPage="queryParam.page" v-model:page-size="queryParam.pageSize" :page-sizes="paginationOption.pageSizes" :background="false" :layout="paginationOption.layout" :total="paginationOption.total" @size-change="handleChangeSize" @current-change="handleChangeCurrent" />
      </div>
    </div>
    <EditDialog ref="editDialogRef" @success="loadData()"></EditDialog>
    <AllocateDialog ref="allocateDialogRef" @success="loadData()"></AllocateDialog>
  </div>
</template>

<script setup>
/**
 * 角色组件
 */
import { ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
//组件
import EditDialog from './EditDialog.vue';
import AllocateDialog from './AllocateDialog.vue';

// ======================================================
//                      变量声明
// ======================================================

// 组件引用
const editDialogRef = ref(null);
const allocateDialogRef = ref(null);
// 表格数据
const dataOfTable = ref([]);
// 组件可视状态
const visibleState = ref({
  searchForm: true,
})
// 表格查询参数
const queryParam = ref({
  q: '',
  search: '',
  orderby: '',
  page: 1,
  pageSize: 10,
})
// 分页栏配置数据
const paginationOption = ref({
  layout: 'total, sizes, prev, pager, next, jumper',
  pageSizes: [10, 20, 50, 100, 500, 1000],
  total: 0,
})
// 表格多选数据
const multipleSelection = ref([]);

// ======================================================
//                      点击操作
// ======================================================


// 点击新增按钮
const onAdd = () => {
  editDialogRef.value.show(null, '添加角色');
}
// 点击分配权限按钮
const onAllocate = () => {
  allocateDialogRef.value.show(null, '分配权限');
}


// 点击批量删除按钮
const onDeleteMulti = () => {
  let n = multipleSelection.value.length, ids = multipleSelection.value.map((item) => item.Id).join();
  console.log("ids", ids)
  ElMessageBox.confirm(`确定要删除 ${n} 条记录吗？`, '警告').then(() => {
    EsAjax.post(ApiUrls.roleDelete, { param: { ids: ids } }).then(res => {
      console.log(res)
      if (res.data.code !== 200) {
        ElMessage.warning(res.data.msg);
        return;
      }
      ElMessage.success('操作成功');
      loadData();
    }).catch(err => {
      ElMessage.error('网络错误：' + err.message);
    })
  }).catch(() => { })
}


// 点击行内编辑按钮
const onEditRow = (row) => {
  editDialogRef.value.show(row.Id, '编辑角色 ', row);
}

// ======================================================
//                      处理事件
// ======================================================

// 处理表格全选
const handleSelectionChange = (val) => {
  console.log(val)
  multipleSelection.value = val
}

// 处理表格排序
const handleSortChange = (column) => {
  queryParam.value.orderby = column.prop + ' ' + (column.order == 'descending' ? 'desc' : 'asc');
  console.log(queryParam.value);
  loadData();
}

// 处理分页尺寸
const handleChangeSize = (val) => {
  console.log(`${val} items per page`);
  queryParam.value.page = 1;
  queryParam.value.pageSize = val;
  loadData();
}

// 处理页码
const handleChangeCurrent = (val) => {
  console.log(`current page: ${val}`)
  queryParam.value.page = val;
  loadData();
}

// ======================================================
//                      处理事件
// ======================================================

const loadData = () => {
  EsAjax.post(ApiUrls.roleDatagrid, queryParam.value).then(res => {
    if (res.data.code !== 200) {
      ElMessage.warning(res.data.msg);
      return;
    }
    dataOfTable.value = res.data.data.data;
    paginationOption.value.total = res.data.data.total;
  }).catch(err => {
    ElMessage.error(err.message);
  })
}

loadData();
</script>

